<template>
	<view>
		<view class="now-list">
			<view
				class="box"
				:class="row.type===true?'':'flipped'"
				v-for="(row, index) in categoryList"
				:key="index"
				@tap="toCard(row)"
			>
				<view class="card front" open-type="contact">
					<image :src="row.img"></image>
					<text>{{row.name}}</text>
				</view>
				<view class="card back" open-type="contact">
					<text>{{row.text}}</text>
					<text class="textNow" @tap="toCardDetails(row)">
					---- 点击查看详情 ----
					</text>
				</view>
			</view>

		</view>
<!-- 		<view>
			<button class="btn" open-type="contact">
				<text>联系客服</text>
			</button>
		</view> -->
	</view>
</template>

<script>
	import adminjs from '../../pagesUser/request/pages/tabBar/admin.js';
	
	export default {
		
		data() {
			return {
				// 分类菜单
				categoryList: [
					{ 
						id: 1, 
						name: '恢复', 
						img: '../../static/img/category/1.png', 
						type: true ,
						text: '身体恢复 - 详情'
					},
					{ 
						id: 2, 
						name: '治疗', 
						img: '../../static/img/category/2.png', 
						type: true ,
						text: '辅助治疗 - 详情'
					},
					{ 
						id: 3, 
						name: '养病', 
						img: '../../static/img/category/3.png', 
						type: true ,
						text: '居家养病 - 详情'
					},
					{ 
						id: 4, 
						name: '服务', 
						img: '../../static/img/category/4.png', 
						type: true ,
						text: '残疾服务 - 详情'
					}
				]
				
			};
		},

		methods: {
			toCard(e){
				e.type=!e.type;
			},
			toCardDetails(e){
				let self = this;
				uni.showToast({title: e.name,icon:"none"});
				// 医疗服务请求
				const data = {
					//参数
					tasksName: e.name,
					tasksType: e.id
				};
				
				//医疗服务消息订阅
				//用户发生点击行为或者发起支付回调后，才可以调起订阅消息界面subscriptionMessage(){
				uni.requestSubscribeMessage({
					//需要订阅的消息模板的id的集合,一次调用最多可订阅3条消息
					tmplIds:[ 'HytSUgxEqO4xbumCG3N2apRV6TWK_N7qX4Wry_6zR4Y'],
					success(res) {
						console.log(res)
						self.notice(e.name);
						adminjs.addService(data).then(res => {
							console.log(res)
						});
					}
				});
				
				e.type=!e.type;
			},
			// 通知
			notice(typeName) {
				let self = this;
				//实际应用中，此处应该提交长连接，模板仅做本地处理。
				var nowDate = new Date();
				var year = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1;
				var day = nowDate.getDate();
				var hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
				var minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var nowTime = year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
				console.log("当前时间: " + nowTime)
				// 上门单号 {{character_string1.DATA}}
				// 上门地址 {{thing2.DATA}}
				// 机主电话 {{phone_number3.DATA}}
				// 备注 {{thing4.DATA}}
				// 接单时间 {{time5.DATA}}
				const datas = {
					"touser" : getApp().globalData.user.openId,
					"template_id": "HytSUgxEqO4xbumCG3N2apRV6TWK_N7qX4Wry_6zR4Y",
					"data": {
						"character_string1": {
							"value": "Ser" + nowDate.getTime()
						},
						"thing2": {
							"value": getApp().globalData.userData.personAddress
						},
						"phone_number3": {
							"value": getApp().globalData.userData.personTel
						},
						"thing4": {
							"value": "服务类型: " + typeName + ", 请留意工作人员联系!"
						},
						"time5": {
							"value": nowTime
						}
					}
				};
				uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + getApp().globalData.user.accessToken,
					data: JSON.stringify(datas),
					method: 'POST',
					success: function(res) {
						console.log(res)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/* 修改按钮样式 */
	
	/deep/button{
		border-radius: 500upx !important;
	}

	page{
		position: relative;
		background-color: #f2f2f2;
	}
	button::after { border: none }
	.btn {
		color: #fff;
		width: 240upx;
		height: 240upx;
		background-color: #3E8BC7;
		border: solid 2upx #3E8BC7;
		font-size: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 5% auto;
		// 同心圆代码
		background-clip: content-box;
		padding: 3px;
	}
	
	.now-list {
		width: 92%;
		margin: 0 4%;
		padding: 0 0 30upx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.box{
			width: 48%;
			height: 460upx;
			margin-top: 50upx;
			flex-wrap: wrap;
			
		    transform-style: preserve-3d;
		    transition: transform 0.6s;
		}
		.card{	 
			//display: block;
			z-index: 10;
			position: absolute;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;//后面的藏起来, 不然会有小叠加..
			border-radius: 20upx;
		}
		.front{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			box-shadow: 2upx 2upx 20upx rgba(0,0,0,0.3);
			
			background: #fff;
			image{
				width: 100upx;
				height: 100upx;
				margin-bottom: 60upx;
			}
			text{
				color: #3E8BC7;
				font-size: 48upx;
			}
		}
		.back{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			box-shadow: 2upx 2upx 20upx rgba(0,0,0,0.3);
			
			transform: rotateY(180deg);
			background: #3E8BC7;
			text{
				color: #fff;
				font-size: 32upx;
			}
			.textNow{
				width: 90%;
				// 文本居中
				display: flex;
				justify-content: center;
				// 上边界白线
				border-top: solid 5upx #fff;
				padding-top: 20upx;
				color: #F8F8F8;
				// 字体大小
				font-size: 24upx;
				// 相对于卡片在下方
				bottom: 25upx;
				right: auto;
				position: absolute;
			}
		}
		.flipped{
			transform: rotateY(180deg);
		}

	}
</style>
